<template>
	<view>
		<u-popup :show="show" round="20rpx" mode="bottom" @close="close">
			<view class="p1A">
				<view class="hwqr-1">仓库货位确认</view>
				<view class="hwqr-2">
					<view class="p1A-1">
						<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Yp1">
							<view v-for="(item,index) in theLeft" :key="index"
								:class="index==leftIndex?'yp-left':'yp-left-active'" @click="handleLeft(item,index)">
								{{item.name}}
							</view>
						</scroll-view>
					</view>
					<view class="p1A-2">
						<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Yp1">
							<view v-for="(item,index) in theRight" :key="index"
								:class="index==rightIndex?'yp-right':'yp-right-active'"
								@click="handleRight(item,index)">{{item.name}}</view>
						</scroll-view>
					</view>
				</view>
				<view class="hwqr-3">
					<view class="hwqr-4" @click="handleWarehouse">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getWarehouse
	} from '@/api/store.js'
	export default{
		data(){
			return{
				show:false,
				rightIndex:0,
				leftIndex:0,
				queryParams:{
					pageNo: 1,//页码
					pageSize: 99,//条数
				},
				moneys:[],
				theLeft:[],
				theRight:[],
				subscript:0
			}
		},
		methods:{
			// 获取仓库货位列表
			async getWarehouses() {
				let response = await getWarehouse(this.queryParams)
				this.moneys = response.data.list
				this.theLeft = response.data.list.filter(item => item.parentId == null)//筛选出仓库数据
				this.theRight = response.data.list.filter(item => item.parentId == this.theLeft[0].id)//默认获取仓库第一个下标的数据
				this.show = true
			},
			// 选择的货位
			handleRight(items, index) {
				this.rightIndex = index
			},
			// 点击仓库筛选出来货位
			handleLeft(items, index) {
				this.leftIndex = index
				this.rightIndex = 0
				this.theRight = this.moneys.filter(item => item.parentId == items.id)
			},
			// 点击仓库内确定
			handleWarehouse() {
				if(this.rightIndex==0){
					// 进来默认选中的数据是0下标直接点击确定
					 this.$emit('setValueName',this.theRight[0])
				}else{
					// 进来默认选中的数据不是0下标直接点击确定
					this.$emit('setValueName',this.theRight[this.rightIndex])
				}
				this.show = false
			},
			// 关闭弹窗
			close() {
				this.rightIndex = 0
				this.leftIndex = 0
				this.show = false
			},
			// 控制弹起
			handleIsShow(data,type){
				// data 是传过来的数据，type 是否使用传过来的数据，true使用传过来的数据  false使用接口的数据
				if(type==true){
					this.moneys = JSON.parse(data) //赋值传过来的数据
					this.theLeft = JSON.parse(data).filter(item => item.parentId == null)//筛选出仓库数据
					this.theRight = JSON.parse(data).filter(item => item.parentId == this.theLeft[0].id)//默认获取仓库第一个下标的数据
					setTimeout(()=>{
						this.show = true //增加一个延迟操作防止数据没有处理完成
					},500)
				}else{
					if(this.moneys.length==0){ //如果没有数据就调接口获取数据
						// 获取仓库列表
						this.getWarehouses()
					}else{ //如果存在数据直接调弹窗弹起
						this.show = true
					}
				}
				
			}
		}
	}
</script>

<style scoped>
	.hwqr-4 {
		width: 50%;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		background-color: #177A77;
		color: #FFFFFF;
		border-radius: 70rpx;
	}
	
	.hwqr-3 {
		width: 100%;
		height: 130rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.hwqr-2 {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
	}
	
	.hwqr-1 {
		width: 100%;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}
	
	.yp-right {
		width: 100%;
		height: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #177A77;
		border-bottom: 1rpx solid #F0F0F0;
	}
	
	.yp-right-active {
		width: 100%;
		height: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1rpx solid #F0F0F0;
	}
	
	.yp-left {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #177A77;
		color: #FFFFFF;
	}
	
	.yp-left-active {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.scroll-Yp1 {
		width: 100%;
		height: 550rpx;
	}
	
	.p1A-2 {
		width: 80%;
		height: 550rpx;
		font-size: 26rpx;
	}
	
	.p1A-1 {
		width: 20%;
		height: 550rpx;
		/* border-right: 1rpx solid #999999; */
		background-color: #F3F8F8;
		font-size: 26rpx;
	}
	
	.p1A {
		width: 100%;
		height: 750rpx;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
</style>